<template>
  <div class="h-full flex flex-col">
    <a v-for="(item, index) in DpiadetailId.split(',').filter(item => item)" :key="index" @click="goToDpiaDetail(item)">
      {{ item.trim() }}
      <br>
    </a>
    <a-drawer :title="$t('user.dpia.detail.look')" :visible="visibleq" width="90%" @close="rollback">
      <DpiaReview :DpiaReviewId = "id" v-if="this.status === 2"/>
      <DpiaOverall :DpiaOverallId = "id" v-if="this.status === 3 || this.status === 4"/>
    </a-drawer>
    
  
  </div>
</template>

<script>
import {
  dpiaId
} from '@/api/dpia/form'
import DpiaReview from './dpiaReview.vue'
import DpiaOverall from './dpiaOverall.vue'
export default {
  props: {
    DpiadetailId: {
      type: String,
    },
    DpiaOverallId: {
      type: String,
    },
  },
  components: {
    DpiaReview,
    DpiaOverall,
  },
  data() {
    return {
      id: '',
      visibleq: false,
      status: '',
    }
  },
  created() {
   
  },
  mounted() {
    let that = this
    window.addEventListener('setItemEvent', function (e) {
      if (e.key == 'lang') {
        let lang = JSON.parse(e.value)
        if (lang == 'zh-EN') {
          that.lang = false
        } else {
          that.lang = true
        }
      }
    })
  },
  methods: {
    async goToDpiaDetail(item) {
      this.visibleq = true;
      const dpiaid = String(item)
      const { data: data } = await dpiaId({ dpiaId: dpiaid });
      const { Id, DpiaStatus } = data
      this.id = Id
      this.status = DpiaStatus
    },
    rollback() {
      this.visibleq =false;
    },

  },
}
</script>

<style lang="less" scoped>
</style>
